<template>
  <div>
    <el-form v-loading="loadingFrom" ref="agreementForm" :inline="true" :model="agreementForm" label-width="100px"
      :rules="rules">
      <el-form-item label="名称" prop="name" class="inline">
        <el-input v-model.trim="agreementForm.name" :maxlength="isCn ? '16' : '16'" :disabled="isDisabled"
          placeholder="请输入协议名称" />
      </el-form-item>
      <el-form-item label="正文" prop="content" class="lang">
        <Tinymce v-model.trim="agreementForm.content"></Tinymce>
      </el-form-item>
      <el-form-item label="是否启用" v-if="agreementForm.enabled" class="inline">
        <el-switch v-model="agreementForm.enabled" :disabled="isDisabled" :active-value="'true'" :inactive-value="'false'"
          active-text="生效" inactive-text="失效"></el-switch>
      </el-form-item>
    </el-form>
    <div class="dialog-footer" v-if="!isDisabled">
      <el-button type="primary" v-hasPermi="['platform:agreement:add', 'platform:agreement:update']" :loading="loading"
        @click="onsubmit('agreementForm')">保存</el-button>
    </div>
  </div>
</template>

<script>
import * as agreement from '@/api/agreement';
import Tinymce from '@/components/Tinymce/index';
import { mapGetters } from 'vuex';
import Keyword from '../../../components/base/keyword';

export default {
  name: 'creatAgreement',
  components: { Keyword, Tinymce },
  computed: {
  },
  props: {
    merId: {
      type: Number,
      default: 0,
    },
    agreementId: {
      type: Number,
      default: 0,
    },
    isDisabled: {
      type: Boolean,
      default: false,
    },
    // dialogVisible: {
    //   type: Boolean,
    //   default: false,
    // },
    indexKey: {
      type: Number,
      default: 0,
    },
  },
  data() {
    const validateVal = (rule, value, callback) => {
      if (this.labelarr.length === 0) {
        callback(new Error('请输入后回车'));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      loading: false,
      loadingFrom: false,
      rules: {
        name: [{ required: true, message: '请输入协议名称', trigger: 'blur' }],
      },
      agreementForm: {
        name: '',
        content: '',
        enabled: 'true',
        id: 0,
      },
      isCn: true,
      labelarr: [],
    };
  },
  watch: {
    agreementId: {
      handler: function (val) {
        if (val > 0) this.onInfo();
      },
      deep: true,
    },
    'agreementForm.name': function (val) {
      let pattern = new RegExp('[\u4E00-\u9FA5]+');
      let pattern2 = new RegExp('[A-Za-z]+');
      if (pattern.test(val)) {
        this.isCn = true;
      } else if (pattern2.test(val)) {
        this.isCn = false;
      }
    },
  },
  mounted() {
    if (this.agreementId > 0) this.onInfo();
  },
  methods: {
    getLabelarr(attr) {
      this.labelarr = attr;
    },
    onChange(id) {
    },
    // 详情
    onInfo() {
      this.loadingFrom = true;
      agreement.agreementDetailApi(this.agreementId).then((res) => {
        this.$set(res, 'sliderImages', res.qualificationPicture ? JSON.parse(res.qualificationPicture) : []);
        this.agreementForm = res;
        if (this.agreementForm.enabled) {
          this.agreementForm.enabled = 'true'
        } else {
          this.agreementForm.enabled = 'false'
        }
        this.loadingFrom = false;
      });
    },
    handleClose() {
      this.$nextTick(() => {
        this.$refs['agreementForm'].resetFields();
      });
    },
    handleRemove(i) {
      this.agreementForm.sliderImages.splice(i, 1);
    },
    onClose() {
      this.$refs['agreementForm'].resetFields();
      this.agreementForm.content = '';
      this.loading = false;
      this.$emit('saveFinish');
    },
    onsubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.agreementForm.merchantId = this.merId
          this.loading = true;
          this.agreementForm.id === 0
            ? agreement
              .agreementAddApi(this.agreementForm)
              .then((res) => {
                this.$message.success(`添加协议成功`);
                this.onClose();
              })
              .catch(() => {
                this.loading = false;
              })
            : agreement
              .agreementUpdateApi(this.agreementForm)
              .then((res) => {
                this.$message.success('操作成功');
                this.onClose();
              })
              .catch(() => {
                this.loading = false;
              });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.dialog-footer {
  text-align: right;
  box-sizing: border-box;
}

.el-alert {
  line-height: 20px;
  margin-left: 41px;
  margin-bottom: 9px;
  width: 90%;

  ::v-deep.el-form-item__content {
    width: 94%;
  }
}

.lang {
  width: 93.5%;

  ::v-deep.el-form-item__content {
    width: 79%;
  }
}

.inline {

  // width: 228px;
  ::v-deep.el-form-item__content,
  ::v-deep.el-input-number {
    width: 228px;
  }

  ::v-deep.el-select {
    width: 100%;
  }
}
</style>
